<template>
  <div class="app-container">
    <!-- 搜索区域使用 collapse transition -->
    <el-collapse-transition>
      <el-card
        v-show="isFilterVisible"
        class="search-wrapper filter-card"
        shadow="hover"
      >
        <div>
          <el-form
            ref="filterForm"
            :model="listQuery"
            :inline="true"
            label-width="80px"
          >
            <el-form-item label="日期:">
              <div class="date-range-container">
                <el-date-picker
                  v-model="listQuery.startDate"
                  type="date"
                  placeholder="起始日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  style="width: 140px"
                />
                <span class="date-separator">至</span>
                <el-date-picker
                  v-model="listQuery.endDate"
                  type="date"
                  placeholder="结束日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  style="width: 140px"
                />
              </div>
            </el-form-item>

            <el-form-item label="单据号:">
              <el-input
                v-model="listQuery.orderNo"
                placeholder="请输入单据编号"
                style="width: 200px"
                clearable
              />
            </el-form-item>

            <el-form-item label="调出仓库:">
              <el-select
                v-model="listQuery.outWarehouse"
                placeholder="请选择"
                style="width: 150px"
                clearable
              >
                <el-option label="主仓库" value="main" />
                <el-option label="分仓库" value="branch" />
              </el-select>
            </el-form-item>

            <el-form-item label="调入仓库:">
              <el-select
                v-model="listQuery.inWarehouse"
                placeholder="请选择"
                style="width: 150px"
                clearable
              >
                <el-option label="主仓库" value="main" />
                <el-option label="分仓库" value="branch" />
              </el-select>
            </el-form-item>

            <el-form-item label="审核状态:">
              <el-select
                v-model="listQuery.auditStatus"
                placeholder="全部"
                style="width: 120px"
                clearable
              >
                <el-option label="全部" value="" />
                <el-option label="未审核" value="unaudited" />
                <el-option label="已审核" value="audited" />
              </el-select>
            </el-form-item>

            <el-form-item class="form-buttons">
              <el-button
                type="primary"
                size="small"
                icon="el-icon-search"
                @click="handleFilter"
              >查询</el-button>
              <el-button
                size="small"
                icon="el-icon-refresh"
                @click="resetForm"
              >重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </el-collapse-transition>

    <el-card class="main-content-card" shadow="hover">
      <!-- 报表标题 -->
      <div class="report-title-container">
        <div class="report-title-centered">调拨单历史记录</div>
      </div>

      <!-- 操作按钮区域 -->
      <div class="table-operations">
        <div class="left-operations">
          <el-button
            type="primary"
            size="small"
            class="filter-trigger"
            @click="isFilterVisible = !isFilterVisible"
          >{{ isFilterVisible ? "收起" : "检索" }}
            <i
              :class="['el-icon-arrow-down', { 'is-reverse': isFilterVisible }]"
            />
          </el-button>
          <el-button
            type="primary"
            size="small"
            icon="el-icon-plus"
            @click="handleAdd"
          >新增</el-button>
          <el-button
            size="small"
            icon="el-icon-check"
            @click="handleAudit"
          >审核</el-button>
          <el-button
            size="small"
            icon="el-icon-printer"
            @click="handlePrint"
          >打印</el-button>
          <el-button
            size="small"
            icon="el-icon-download"
            @click="handleExport"
          >导出</el-button>
          <el-button
            type="danger"
            size="small"
            icon="el-icon-delete"
            @click="handleDelete"
          >删除</el-button>
        </div>
      </div>

      <!-- 数据表格 -->
      <el-table
        v-loading="listLoading"
        :data="list"
        border
        stripe
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="操作" width="100" fixed>
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              icon="el-icon-edit"
              @click="handleEdit(scope.row)"
            >
              编辑
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="orderDate"
          label="单据日期"
          width="120"
          align="center"
          sortable
        />
        <el-table-column
          prop="orderNumber"
          label="单据编号"
          width="160"
          align="center"
        />
        <el-table-column
          prop="relatedOrderNumber"
          label="关联调拨订单编号"
          width="160"
          align="center"
        />
        <el-table-column
          prop="goods"
          label="商品"
          min-width="200"
          align="center"
        />
        <el-table-column
          prop="goodsType"
          label="商品类别"
          width="120"
          align="center"
        />
        <el-table-column
          prop="quantity"
          label="数量"
          width="100"
          align="right"
        />
        <el-table-column
          prop="outWarehouse"
          label="调出仓库"
          width="120"
          align="center"
        />
        <el-table-column
          prop="inWarehouse"
          label="调入仓库"
          width="120"
          align="center"
        />
        <el-table-column
          prop="auditStatus"
          label="审核状态"
          width="100"
          align="center"
        />
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          background
          :current-page="listQuery.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="listQuery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'TransferOrderHistoricalDocuments',
  data() {
    return {
      isFilterVisible: false,
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 10,
        startDate: '',
        endDate: '',
        orderNo: '',
        outWarehouse: '',
        inWarehouse: '',
        auditStatus: ''
      },
      total: 0,
      list: [],
      multipleSelection: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      // 模拟API调用
      setTimeout(() => {
        this.list = [
          {
            orderDate: '2025-03-21',
            orderNumber: 'DB202503210001',
            relatedOrderNumber: 'DBD202503210001',
            goods: '测试商品',
            goodsType: '测试类别',
            quantity: 100,
            outWarehouse: '主仓库',
            inWarehouse: '分仓库',
            auditStatus: '未审核'
          }
        ]
        this.total = 1
        this.listLoading = false
      }, 500)
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    resetForm() {
      this.$refs.filterForm.resetFields()
      this.handleFilter()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    handleAdd() {
      this.$router.push({
        name: 'TransferOrder'
      })
    },
    handleEdit(row) {
      this.$message.info(`编辑调拨单: ${row.orderNumber}`)
    },
    handleAudit() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请选择要审核的记录')
        return
      }
      this.$message.info('审核选中的记录')
    },
    handlePrint() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请选择要打印的记录')
        return
      }
      this.$message.info('打印选中的记录')
    },
    handleExport() {
      this.$message.info('导出记录')
    },
    handleDelete() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请选择要删除的记录')
        return
      }
      this.$confirm('此操作将永久删除选中记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message.success('删除成功!')
          this.getList()
        })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.search-wrapper {
  margin-bottom: 20px;
}

.date-range-container {
  display: flex;
  align-items: center;
}

.date-separator {
  margin: 0 5px;
}

.table-operations {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.left-operations,
.right-operations {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filter-trigger .el-icon-arrow-down {
  margin-left: 5px;
  transition: transform 0.3s;
}

.filter-trigger .el-icon-arrow-down.is-reverse {
  transform: rotate(180deg);
}

.main-content-card {
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.report-title-container {
  background: linear-gradient(to right, #f7f9fb, #e8eef5, #f7f9fb);
  padding: 15px 0;
  margin: -40px -20px 15px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
}

.report-title-centered {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #303133;
  position: relative;

  &:after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(to right, #f7f9fb, #409eff, #f7f9fb);
    border-radius: 3px;
  }
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

.el-table {
  .cell {
    .number-column {
      font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
    }
  }
}

.el-button--text {
  padding: 2px 0;
  margin-right: 8px;
}
</style>
